<template>
  <div>
    <el-select v-model="section_id" placeholder="请选择年段" size="small"
               class="w-140 mr-10" @change="sectionChange">
      <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"
                 :key="index"></el-option>
    </el-select>
    <el-select v-model="class_id" placeholder="请选择班级" size="small" class="w-140 mr-10">
      <el-option :label="item.class_name" :value="item.id" v-for="item in classesList"
                 :key="item.id"></el-option>
    </el-select>
  </div>
</template>

<script>

export default {
  name: 'studentMultiple',
  props: ['sectionId', 'classId'],
  data() {
    return {
      section_id: '',
      class_id: '',
      sectionList: [],
      classesList: [],
      page: 1
    }
  },
  watch: {
    section_id(val) {
      this.$emit('updateVal', {section_id: val})
    },
    class_id(val) {
      this.$emit('updateVal', {class_id: val})
    },
    sectionId(val){
      if(!val){
        this.section_id = ''
      }
    },
    classId(val){
      if(!val){
        this.class_id = ''
      }
    }
  },
  created() {
    this.classList()
  },
  methods: {
    // 获取年段班级信息
    async classList() {
      // 年段
      let n = this;
      let data = await this.$fetch(this.api.user_sectionindex, {p: this.page});
      if (data.code === 0) {
        this.sectionList = data.list.data
        setTimeout(() => {
          n.classSecondList()
        }, 200)
      } else {
      }
    },
    async classSecondList() {
      // 班级
      let data = await this.$fetch(this.api.user_classesindex, {p: this.page})
      if (data.code === 0) {
        let array_ = {}
        for (let i in data.list.data) {
          let new_array = array_[data.list.data[i].section_id] || []
          new_array.push(data.list.data[i])
          array_[data.list.data[i].section_id] = new_array
        }
        this.classesListNew = array_
      }
    },
    sectionChange(val) {
      this.class_id = ''
      for (let i in this.sectionList) {
        if (this.sectionList[i].id === val) {
          this.classesList = this.classesListNew[this.sectionList[i].section_name]
          return
        }
      }
    }
  },
  mounted() {
  }
}
</script>
